<template>
	<div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
		<basic-opt :has_left="true">
			<template #search>
				<div class="opt-item">
					<el-input class="w-ipt" placeholder="请输入设备名进行筛选" suffix-icon="el-icon-search" v-model="search.uuid"
						@keydown.enter="getSearchData" size="medium">
					</el-input>
				</div>
				<div class="opt-item">
					<el-input class="w-ipt" placeholder="请输入指令名进行筛选" suffix-icon="el-icon-search"
						v-model="search.command" @keydown.enter="getSearchData" size="medium">
					</el-input>
				</div>
				<div class="opt-item">
					<el-select class="w-ipt" v-model="search.state" @change="stateChange" placeholder="请选择状态"
						size="medium">
						<el-option v-for="(item, index) in state_list" :label="item.name" :value="item.value"
							:key="index"></el-option>
					</el-select>
				</div>
				<div class="opt-item">
					<el-button @click="getSearchData" size="medium">搜索</el-button>
				</div>
				<div class="opt-item">
					<reset-search></reset-search>
				</div>
			</template>
		</basic-opt>

		<div class="table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
				<el-table-column prop="id" label="ID" width="150px"></el-table-column>
				<el-table-column prop="device_uuid" label="设备ID" width="300px"></el-table-column>
				<el-table-column prop="command" label="指令" width="300px"></el-table-column>
				<el-table-column prop="command_title" label="指令名字" width="300px"></el-table-column>
				<el-table-column prop="state" label="状态" width="100px">
					<template #default="scope">
						<span v-if="scope.row.state == '1'" style="color: #409eff;">已创建</span>
						<span v-if="scope.row.state == '2'">已下发</span>
						<span v-if="scope.row.state == '3'" style="color: green;">成功</span>
						<span v-if="scope.row.state == '4'" style="color: red;">失败</span>
					</template>
				</el-table-column>
				<el-table-column prop="created_at" label="下发时间" width="200px"></el-table-column>
				<el-table-column prop="updated_at" label="更新时间" width="200px"></el-table-column>
				<el-table-column label="操作" prop="data">
					<template #default="scope">
						<el-popover placement="left" width="800" trigger="click">
							<el-row v-for="(value,name) in JSON.parse(scope.row.data)" :key="name"
								style="padding: 10px;">
								{{name}}: {{value}}
							</el-row>
							<template #reference>
								<el-button type="info" plain size="mini">查看内容
								</el-button>
							</template>
						</el-popover>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>
	</div>

	<!--  mobile  -->
	<div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求"
		element-loading-spinner="el-icon-loading">
		<div class="mobile-search-box">
			<el-input class="w-ipt" placeholder="请输入指令名进行筛选" suffix-icon="el-icon-search" v-model="search.name"
				@keydown.enter="getSearchData" size="medium">
			</el-input>
			<el-button @click="getSearchData" size="medium">搜索</el-button>
		</div>
		<div class="moblie-table-box">
			<el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
				<el-table-column prop="id" label="ID" width="150px"></el-table-column>
				<el-table-column prop="device_uuid" label="设备ID" width="300px"></el-table-column>
				<el-table-column prop="command" label="指令" width="300px"></el-table-column>
				<el-table-column prop="command_title" label="指令名字" width="300px"></el-table-column>
				<el-table-column prop="state" label="状态" width="100px">
					<template #default="scope">
						<span v-if="scope.row.state == '1'" style="color: #409eff;">已创建</span>
						<span v-if="scope.row.state == '2'">已下发</span>
						<span v-if="scope.row.state == '3'" style="color: green;">成功</span>
						<span v-if="scope.row.state == '4'" style="color: red;">失败</span>
					</template>
				</el-table-column>
				<el-table-column prop="created_at" label="下发时间" width="200px"></el-table-column>
				<el-table-column prop="updated_at" label="更新时间" width="200px"></el-table-column>
				<el-table-column label="操作" prop="data">
					<template #default="scope">
						<el-popover placement="left" width="800" trigger="click">
							<el-row v-for="(value,name) in JSON.parse(scope.row.data)" :key="name"
								style="padding: 10px;">
								{{name}}: {{value}}
							</el-row>
							<template #reference>
								<el-button type="info" plain size="mini">查看内容
								</el-button>
							</template>
						</el-popover>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<page-component @pageChanged="onPageChanged"></page-component>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	import mixin from '@/mixin.js'
	import DATE from '@/utils/date.js'

	export default {
		name: 'pushLogs',
		mixins: [mixin],
		data() {
			return {
				search: {
					uuid: '',
					command: '',
					state: ''
				},
				state_list: [{
					name: '已创建',
					value: 1
				}, {
					name: '已下发',
					value: 2
				}, {
					name: '成功',
					value: 3
				}, {
					name: '失败',
					value: 4
				}]
			}
		},
		mounted() {
			this.search.uuid = localStorage.getItem('device_uuid');
			if (this.search.uuid) {
				window.location.hash = "#/push-logs?uuid=" + this.search.uuid;
			}
			this.getData();
		},
		methods: {
			async getData() {
				let self = this;
				self.loading = true;
				try {
					let params = {
						uuid: self.search.uuid ? self.search.uuid : '',
						command: self.search.command ? self.search.command : '',
						push_id: self.search.push_id ? self.search.push_id : '0',
						state: self.search.state ? self.search.state : '0'
					}
					self.addPageInfo(params)
					let res = await API.deviceCommand(params.pageNumber, params.pageSize, params.uuid, params.command,
						params.push_id, params.state)
					self.loading = false;
					self.onGotPageData(res)
				} catch (err) {
					self.loading = false;
				}
			},

			// 格式化表格时间戳
			formatTime(row) {
				return DATE.formatTime(row.time, 'Y-M-D h:m:s')
			},

			stateChange() {
				let self = this;
				self.getSearchData();
			}
		},
		beforeUnmount() {
			localStorage.removeItem('device_uuid')
		}
	}
</script>
